跳到主要内容

TextArea 输入框(新版)

用于多行文本输入,支持字数统计、自动高度、错误提示、无边框等多种场景。

用法

基本引入

import { FQTextareaNew } from '@fq/fq-weapp-ui';

基础用法

<FQTextareaNew placeholder="请输入内容" />

非受控用法

<FQTextareaNew
defaultValue="默认内容"
showCount
onChange={(e) => console.log(e.detail?.value)}
/>

受控用法

<FQTextareaNew value={value} onChange={handleChange} />

显示字数

<FQTextareaNew placeholder="请输入内容" showCount />

字数长度限制

<FQTextareaNew placeholder="请输入内容" showCount maxLength={10} />

字数长度限制并截断

<FQTextareaNew
placeholder="请输入内容"
showCount
maxLength={10}
truncateMaxLength
/>

禁用

<FQTextareaNew placeholder="请输入内容" disabled />

<FQTextareaNew
placeholder="请输入内容"
value="禁用状态, 内容回显"
disabled
showCount
maxLength={5}
/>

错误信息

<FQTextareaNew
placeholder="请输入内容"
showCount
maxLength={60}
error="这里是报错内容区域"
/>

无边框样式

<FQTextareaNew placeholder="请输入内容" variant='borderless' />

根据内容自动增高

<FQTextareaNew placeholder="请输入内容" autoHeight />

指定显示行数

<FQTextareaNew placeholder="请输入内容" rows={3} />

属性说明

FQTextareaNew 继承了 Taro TextareaNewProps 的全部属性,以下为 FQTextareaNewProps 对 TextareaProps 的补充或修改,按功能分类:

基础属性

属性说明类型默认值
value输入框当前值(受控)string-
defaultValue输入框默认值string''
maxLength最大输入长度,超出后不再允许输入(覆盖 TaroTextarea 的 maxlength)number-
truncateMaxLength达到最大长度后是否禁止继续输入booleanfalse
status自定义状态,可选 'error'string-

内容与交互

属性说明类型默认值
showCount是否显示字数统计,或自定义渲染字数统计boolean | (length, maxLength) => ReactNodefalse
onChange输入内容变化时的回调(等价于 TaroTextarea 的 onInput)function-

状态与样式

属性说明类型默认值
error错误提示内容,输入框下方展示string-
variant边框样式'outlined' | 'borderless''outlined'
className自定义样式类名string-
style自定义样式CSSProperties-

行数与高度

属性说明类型默认值
rows指定显示行数,固定高度为 rows * 行高number-
autoHeight内容变化时自动增高(TaroTextarea 的 autoHeight)booleanfalse

未修改的 TextareaProps 属性(如 value、placeholder、disabled、name、onFocus、onBlur 等),请参考 TaroTextarea 组件文档

补充说明:

  • 受控模式:传入 value,由外部状态驱动展示值。
  • 非受控模式:不传 value,通过 defaultValue 指定初始值,后续由组件内部维护。